import React,{useState} from 'react'
import './detailData.css'
import { Space,DatePicker} from 'antd';
import { Link,Outlet} from 'react-router-dom'
const { RangePicker } = DatePicker;


     // 时间处理
  let dataNow = new Date().toLocaleDateString().replace(/\//g,',');
  let fifthdata = new Date(dataNow)
  fifthdata.setDate(fifthdata.getDate()-15);
  let dataStart = fifthdata.getFullYear()+"-"+Number(fifthdata.getMonth()+1)+"-"+fifthdata.getDate()
  let dataEndFormData = dataNow.replace(/,/g,'-')


export default function Index() {

    const [classIndex,setClassIndex] = useState(0)
    function changeClass(e){
        setClassIndex(e.currentTarget.getAttribute("data-index"));
    }

    const [endDataNum,setEndDataNum] = useState(dataEndFormData)
    const [startDataNum,setStartDataNum] = useState(dataStart)
  
    const [time1,settime1] = useState(startDataNum)
    const [time2,settime2] = useState(endDataNum)
    const onChange = (time,timeString) => {
      settime1(timeString[0])
      settime2(timeString[1])
    };
    const setDate = () => {
      setStartDataNum(time1)
      setEndDataNum(time2)
    }

    

  return (
    <div id='detailData'>

      <div className='cusDate'>
        <div >按日期查看</div>
        <div>
          <Space direction="vertical" size={12}>
            <RangePicker onChange={onChange}/>      
          </Space>
        </div>
        <div>
          <div className='search' onClick={setDate}>立即查看</div>
        </div>
        <div className='endData'>
          统计日期&nbsp;
          <div>{startDataNum}</div>至&nbsp;
          <div>{endDataNum}</div>
        </div>
      </div>
      <div className='title'>
          {/* eslint-disable-next-line */}
          <Link to="staffTable" className={"0"==classIndex?"active":""} onClick={changeClass} data-index="0"><span>安员工</span></Link>
          <Link to="departTable" className={"1"===classIndex?"active":""} onClick={changeClass} data-index="1"><span>安部门</span></Link>
        </div>
      <div className='tableData'>
        <Outlet/>
      </div>
    </div>
  )
}
